<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0 maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <title>JoinUs</title>
    <meta name="keywords" content="关键词"/>
    <meta  name="description" content="描述"/>
    <!--<link rel="shortcut icon" href="images/logo1.png" />-->
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link href="css/index.css" rel="stylesheet"/>
</head>
<body>
    <header>
        <nav>

        </nav>
    </header>
<div class="container col-md-10 col-md-offset-1">
    <main>
        <section id="section_aboutUs" class="clearfix">
            <div class="section_title h3">
                <p id="section_aboutUs_title">About Us</p>
                <hr/>
            </div>
            <div class="section_main">
                <div id="carousel-example-generic" class="carousel slide " data-ride="carousel">
                    <!-- Indicators -->
                    <ol class="carousel-indicators">
                        <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                        <li data-target="#carousel-example-generic" data-slide-to="3"></li>
                    </ol>
                    <!-- Wrapper for slides -->
                    <div class="carousel-inner" role="listbox">
                        <div class="item active">
                            <img src="img/1.jpg" alt="..."/>
                            <div class="carousel-caption">
                                <p class="h3">后端开发</p>
                                <p>to be no.1</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/2.jpg" alt="..."/>
                            <div class="carousel-caption">
                                <p class="h3">Andriod开发</p>
                                <p>to be no.1</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/3.jpg" alt="..."/>
                            <div class="carousel-caption">
                                <p class="h3">嵌入式开发</p>
                                <p>to be no.1</p>
                            </div>
                        </div>
                        <div class="item">
                            <img src="img/4.jpg" alt="..."/>
                            <div class="carousel-caption">
                                <p class="h3">前端开发</p>
                                <p>to be no.1</p>
                            </div>
                        </div>
                    </div>
                    <!-- Controls -->
                    <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
                        <span class="icon-prev" aria-hidden="true"></span>
                        <span class="sr-only">Previous</span>
                    </a>
                    <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
                        <span class="icon-next" aria-hidden="true"></span>
                        <span class="sr-only">Next</span>
                    </a>
                </div>
                <div id="intro">
                    <section>
                        <p class="h3">Wingling Studio</p>
                        <p>翼灵物联工作室成立于2013年11月，隶属于物联网工程教研室。</p>
                        <p>是一个集学生创新与项目实战与一体的科学性实验室，由留美教师梁宗文为指导老师。</p>
                        <p>团队以探索物联网前沿科技为主导，科研竞赛与项目外包为团队主要工作。</p>
                    </section>
                    <section class="clearfix">
                        <ul>
                            <li>
                                <figure id="embedded" class="myImage">
                                    <a href="#" target="_blank">
                                        <img src="img/embedded.png"/>
                                    </a>
                                    <figuration>
                                        <a href="#" target="_blank">
                                            <span class="h4">嵌入式开发</span>
                                        </a>
                                    </figuration>
                                </figure>
                            </li>
                            <li>
                                <figure id="webback" class="myImage">
                                    <a href="#" target="_blank">
                                        <img src="img/webback.png"/>
                                    </a>
                                    <figuration>
                                        <a href="#" target="_blank">
                                            <span class="h4">后端开发</span>
                                        </a>
                                    </figuration>
                                </figure>
                            </li>
                            <li>
                                <figure id="android" class="myImage">
                                    <a href="#" target="_blank">
                                        <img src="img/android.png"/>
                                    </a>
                                    <figuration>
                                        <a href="#" target="_blank">
                                            <span class="h4">Android开发</span>
                                        </a>
                                    </figuration>
                                </figure>
                            </li>
                            <li>
                                    <figure id="webfront" class="myImage">
                                        <a href="#" target="_blank">
                                            <img src="img/html.png"/>
                                        </a>
                                        <figuration>
                                            <a href="#" target="_blank">
                                                <span class="h4">前端开发</span>
                                            </a>
                                        </figuration>
                                    </figure>
                            </li>
                        </ul>
                    </section>
                </div>
            </div>
        </section>
        <section id="section_joinUs">
            <div class="section_title  h3">
                <p id="section_joinUs_title">Join Us</p>
                <hr/>
            </div>
            <div class="section_main">
                    <form role="form">
                        <div class="form-group">
                            <label for="Uid">姓名：</label>
                            <input type="text" id="Uid" class="form-control" placeholder="姓名"/>
                        </div>
                        <div class="form-group">
                            <label for="Tel">电话：</label>
                            <input type="tel" id="Tel" class="form-control" placeholder="电话"/>
                        </div>
                        <div class="form-group">
                            <label for="Email">邮箱：</label>
                            <input type="email" id="Email" class="form-control" placeholder="邮箱"/>
                        </div>
                        <div class="form-group">
                            <label for="Selfintro">自我简述：</label>
                            <textarea rows="5" id="Selfintro" class="form-control" placeholder="自我简述"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="Pro">专业：</label>
                            <select class="form-control" id="Pro">
                                <option selected="selected">物联网工程</option>
                                <option>计算机科学与技术</option>
                                <option>软件工程</option>
                                <option>网络工程</option>
                            </select>
                            <p class="help-block">温馨提示：团队招新时间为每年的秋季开学（具体时间待定），在非招新时间段填写报名表，没有效哦!</p>
                        </div>
                        <button type="button" id="btn1" name="btn1" class="btn btn-primary" data-toggle="modal"
                                data-target="#myModal">Submit
                        </button>
                    </form>
            </div>
        </section>
        <a href="/haha" target="_blank">info.html</a>
        <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-describedby="students's information">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <p class="modal-title h4" id="myModalLabel">你的报名信息为：</p>
                    </div>
                    <div class="modal-body">
                        <form role="form" id="joinForm" name="joinForm">
                            <div class="form-group">
                                <label for="Userid">姓名：</label>
                                <input type="text" id="Userid" name="Userid" class="form-control" readonly="readonly"/>
                            </div>
                            <div class="form-group">
                                <label for="Telephone">电话：</label>
                                <input type="tel" id="Telephone" name="Telephone" class="form-control" readonly="readonly"/>
                            </div>
                            <div class="form-group">
                                <label for="Emailbox">邮箱：</label>
                                <input type="email" id="Emailbox" name="Emailbox" class="form-control" readonly="readonly"/>
                            </div>
                            <div class="form-group">
                                <label for="Selfintroduction">自我简述：</label>
                                <textarea rows="5" id="Selfintroduction" name="Selfintroduction" class="form-control"
                                          readonly="readonly"></textarea>
                            </div>
                            <div class="form-group">
                                <label for="Professional">专业：</label>
                                <input type="text" id="Professional" name="Professional" class="form-control" readonly="readonly"/>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="btn2" name="btn2" form="joinForm" data-dismiss="modal">再修改一下</button>
                        <button type="button" class="btn btn-primary" id="sub1" name="sub1" form="joinForm">确认无误，提交
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </main>
    <footer>

    </footer>
</div>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/index.js"></script>
    <script src="js/jquery-1.12.0.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/EventUtil.js"></script>
    <script>
        //改变轮播框时间
        $(".carousel").carousel({
            interval: 2500
        });
    </script>
</body>
</html>